import $ from './library/jquery.js';
import cookie from './library/cookie.js';
let shop = cookie.get('shop');

if (shop) {
    shop = JSON.parse(shop);
    // console.log(shop)
    let idList = shop.map(el => el.id).join();

    $.ajax({
        type: "get",
        url: "../../interface/getItems.php",
        data: {
            idList
        },
        dataType: "json"
    }).then(function(res) {

        // console.log(res);

        let tempString = '';
        let count = 0;
        let count1 = 0;
        shop.forEach(el => {
            // console.log(el.num)
            count += el.num;

        })
        count = '' + count;
        // console.log(count)
        // console.log(shop);
        $('#pro').text(count);
        // console.log($('#pro'));

        for (let key in shop) {
            // console.log(shop)
            count1 += shop[key].num * shop[key].price;
        }
        // console.log(count1)
        $('#por').text(count1);
        // console.log($('#por'));



        res.forEach(el => {
            let picture = JSON.parse(el.picture);

            // 让ajax请求数据结果遍历的id与cookie中对应id相同 才可以填写数据
            let current = shop.filter(elm => elm.id === el.id);
            tempString += `<div class="list-item">
            <div class="item-box">
                <div class="item-table">
                    <div class="item-row clearfix">
                        <div class="col col-check">
                            <input type="checkbox" class="icon-checkbox checkitem">
                        </div>
                        <div class="col col-img">
                            <a href="javascript:"><img alt="" src="../${picture[0].src}" width="80" height="80"></a>
                        </div>
                        <div class="col col-name">
                            <h3 class="name"><a href="javascript:">${el.title}</a>
                            </h3>

                        </div>
                        <div class="col col-price">${parseFloat(el.price).toFixed(2)}元</div>
                        <div class="col col-num ">
                            <div class="change-goods-num clearfix prod">
                                <a href="javascript:;" class="js">-</a>
                                <input type="text" autocomplete="off" class="goods-num" value="${current[0].num}" max="${el.num}" min="1">
                                <a href="javascript:;" class="zj">+</a>
                                <div class="buy-limit">
                                    <div class="msg">还可买 10 件以上</div>
                                </div>
                            </div>
                        </div>
                        <div class="col col-total">${(current[0].num * parseFloat(el.price)).toFixed(2)}元
                        </div>
                        <div class="col col-action"><a href="javascript:;" title="删除" class="del removeitem" data-id="${el.id}">删除</a></div>
                    </div>
                </div>
            </div>
        </div>`;

        });
        // console.log(tempString);
        $('.list-body').html(tempString).find('.removeitem').on('click', function() {
            let res = shop.filter(el => el.id !== $(this).attr('data-id'));
            cookie.set('shop', JSON.stringify(res), 1);
            location.reload();
        });
        $('.prod').on('click', function(event) {
            console.log(event.target)
            if ($(event.target).attr("class") === "zj") {
                $(event.target).prev().val(function() {
                    return parseInt(this.value) + 1;
                });
            }

            if ($(event.target).attr("class") === "js") {

                if ($(event.target).next().val() <= 1) {
                    $(event.target).next().val(function() {
                        return 1;
                    });
                } else {
                    $(event.target).next().val(function() {
                        return parseInt(this.value) - 1;
                    });
                }
            }
        })



        // $('#pro').
    }).catch(function(xhr) {
        console.log(xhr.status);
    });
}